<template>
    <div class="home-box">
        <div v-for="type in types" :key="type.typeId">
            <div class="list-name">
                <span>{{type.typeName}}</span>
                <span class="list-more" @click="$emit('update:page','Film')">更多 ></span>
            </div>
            <!-- <div class="list-content">
                <film-item v-for="film in type.list" :key="film.filmId" :film="film"></film-item>
            </div>-->
            <filmList class="list-content" :list="type.list"></filmList>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import filmList from "../components/filmList";
export default {
    components: {
        filmList
    },
    data() {
        return {
            types: []
        };
    },
    methods: {
        // loadFilmType() { //原始方法，并非最优方法
        // axios
        //     .get("http://localhost/film-project/filmApi/loadTyps.php")
        //     .then(({ data: { resultState, result }, statusText }) => {
        //         // console.log(res);
        //         if (statusText == "OK" && resultState) {
        //             this.types = result;
        //             for (let i in this.types) {
        //                 this.loadFilmByTypeId(this.types[i].typeId,i);
        //             }
        //         } else {
        //             return Promise.reject();
        //         }
        //     })
        //     .catch(error => {
        //         console.log(error);
        //     });
        // },
        // loadFilmByTypeId(id,i) {
        //     axios
        //         .get("http://localhost/film-project/filmApi/loadFilms.php", {
        //             params: {
        //                 typeId: id
        //             }
        //         })
        //         .then(({ data: { resultState, result }, statusText }) => {
        //             // console.log(res);
        //             if (statusText == "OK" && resultState) {
        //                 // this.types[i].list=result;
        //                 this.$set(this.types[i],"list",result);
        //             } else {
        //                 return Promise.reject();
        //             }
        //         })
        //         .catch(error => {
        //             console.log(error);
        //         });
        // }
        async loadFilmType() {
            //加async能将得到的axios的数据解析出来，不加则显示不出来 为undefined;并且将异步变为同步
            try {
                let { statusText, data } = await axios.get(
                    "http://localhost/film-project/filmApi/loadTyps.php"
                );
                // console.log(statusText,data);
                if (statusText != "OK" || !data.resultState) {
                    // alert("请求失败");
                    // this.$showTip();
                    throw new Error("请求失败");
                }
                for (let i = 0, len = data.result.length; i < len; i++) {
                    // console.log(data.result[i]);
                    let res = await this.loadFilmByTypeId(
                        data.result[i].typeId
                    );
                    if (res.statusText != "OK" || !res.data.resultState) {
                        alert("请求失败");
                    }
                    data.result[i].list = res.data.result;
                }
                this.types = data.result;
            } catch (error) {
                // console.log(error);
                // console.log(error.message);
                // console.log(this.$root);
                // this.$showTip(error.message)
                this.$showMsg(error.message)
            }
        },
        async loadFilmByTypeId(typeId) {
            let result = await axios.get(
                "http://localhost/film-project/filmApi/loadFilms.php",
                {
                    params: {
                        typeId: typeId
                    }
                }
            );
            // console.log(result.data.result);
            return result;
        }
        // async loadFilmType(){//加async能将得到的axios的数据解析出来，不加则显示不出来 为undefined;并且将异步变为同步
        //     let {statusText,data} =await axios.get("http://localhost/film-project/filmApi/loadTyps.php");
        //     // console.log(statusText,data);
        //     if(statusText=="OK" || !data.resultState){
        //         // alert("请求失败");
        //         this.$showTip();
        //     };
        //     for(let i=0,len=data.result.length;i<len;i++){
        //         // console.log(data.result[i]);
        //         let res=await this.loadFilmByTypeId(data.result[i].typeId);
        //         if(res.statusText!="OK" || !res.data.resultState){
        //             alert("请求失败");
        //         }
        //         data.result[i].list=res.data.result;
        //     }
        //     this.types=data.result;

        // },
        // async loadFilmByTypeId(typeId){
        //     let result=await axios.get("http://localhost/film-project/filmApi/loadFilms.php",{
        //         params:{
        //             typeId:typeId
        //         }
        //     });
        //     // console.log(result.data.result);
        //     return result;
        // }
    },
    beforeMount() {
        this.$root.$on("update:detail", (arg, page) => {
            this.$root.page = page;
        });
    },
    mounted() {
        this.loadFilmType();
    }
};
</script>
<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>